import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-overview-efficience',
  templateUrl: './overview-efficience.component.html',
  styleUrls: ['./overview-efficience.component.css','../../../../../assets/css/button.css']
})
export class OverviewEfficienceComponent implements OnInit, AfterViewInit, OnDestroy  {

  constructor() { }

  ngOnInit() {
  }

  // @ViewChild('chart') public chartEl: ElementRef;  //highcharts

  public _chart: any; //highcharts

  public chartOptions
  //highcharts
  public ngAfterViewInit() {
    let opts: any = {
      chart: {
        type: 'column',
        inverted: true,
        backgroundColor: 'transparent',
        renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: ['', '', ''],
        labels:{
          enabled:false
        },
        lineWidth:0,
        tickWidth: 0
      },
      yAxis: {
        min: 0,
        title: {
          text: ''
        },
        labels:{
          enabled:false
        },
        gridLineWidth: 0,
      },
      tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true
      },
      plotOptions: {
        column: {
          stacking: 'percent',
          //pointWidth: 15,
          pointInterval: 0.7,
          //pointRange: 0.3,
          //tickPixelInterval: 10
        }
      },
      series: [{
        name: '小张',
        data: [5, 3, 4]
      }, {
        name: '小彭',
        data: [2, 2, 3]
      }, {
        name: '小潘',
        data: [3, 4, 4]
      }]
    };
    this.chartOptions = opts
/*    if (this.chartEl && this.chartEl.nativeElement) {
      opts.chart.renderTo = this.chartEl.nativeElement
      this._chart = new Highcharts.Chart(opts);
    }*/
  }
  public ngOnDestroy() {
    this._chart.destroy();
  }


}
